let $infoB = $('.infoB')
let $shop = $('.shop')
let $place = $('.place')
let $from = $('#from')
let $cityInfo = $('.cityInfo')
let $info = $('.info')
let shopid = 0
let areaid = 0
let $name1 = $('.name1')
let $name2 = $('.name2')
let shop = {
  url: 'http://chst.vip:1234/api/getgsshop',
  success: e,
}
let place = {
  url: 'http://chst.vip:1234/api/getgsshoparea',
  success: a
}
let init = {
  url: 'http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0',
  success: c
}




function e(res) {
  let infoBstr = ''
  res.result.forEach(element => {
    infoBstr += `      
    <li id=${element.shopId}>${element.shopName}</li>`
  });
  $infoB.html(infoBstr)
}
function a(res) {
  let infoBstr = ''
  res.result.forEach(element => {
    infoBstr += `<li id=${element.areaId}>${element.areaName}</li>`
  });
  $infoB.html(infoBstr)
}
function c(res) {
  let contentStr = ''
  res.result.forEach(element => {
    contentStr += `
    <li >
      <a href="">
        <img src="${element.productImg}" alt="">
        <div class="title">${element.productName}</div>
        <p class="price">${element.productPrice}</p>
        <!--<span>去凑单</span>-->
      </a>
    </li>
    `
  });
  $info.html(contentStr)

}

function p(res){
  let str = ''
  res.result.forEach(element => {
    str += `<li >
    <a href="">
      <img src="${element.productImg}" alt="">
      <div class="title">${element.productName}</div>
      <p class="price">${element.productPrice}</p>
      <!--<span>去凑单</span>-->
    </a>
  </li>`
  });
  $info.html(str)

}
ajaxAPI(init)

var a 
let $name1p = $('.name1p')
let $name2p = $('.name2p')
let  i = 0;
$shop.on('click',function () {
  if(i % 2 == 0){
    $name1p.css({
      transform:'rotate(0deg)',
      })
  }else{
    $name1p.css({
      transform:'rotate(180deg)',
      })
  }
  i++
  $name2p.css({
    transform:'rotate(180deg)',
    })
  ajaxAPI(shop)
  $from.slideToggle(500)
  a = true
})
$place.on('click', function () {
  console.log(2);
  if(i % 2 == 0){
    $name2p.css({
      transform:'rotate(0deg)',
      })
  }else{
    $name2p.css({
      transform:'rotate(180deg)',
      })
  }
  i++
console.log(i);
  $name1p.css({
    transform:'rotate(180deg)',
    })
  ajaxAPI(place)
  $from.slideToggle(500)
  a = false
})
$infoB.on('click','li',function(){
  $name1p.css({
    transform: 'rotate(180deg)'
  })
  $name2p.css({
    transform: 'rotate(180deg)'
  })
  i = 0
  console.log($(this).text());
  if(a){
    shopid = $(this).attr('id');
    $name1.html($(this).text())
  }
  else{
    areaid = $(this).attr('id');
    let reg = /^[\u4E00-\u9FA5]{2}/
    let str = $(this).text().match(reg)
    console.log();
    $name2.html(str[0])

  }

  let select = {
    url : 'http://chst.vip:1234/api/getgsproduct?shopid=' + shopid +'&areaid=' + areaid,
    success : p
  }
  ajaxAPI(select)
  $from.slideToggle(200)
})

